<template>
<div class="product-add">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane :label="$t('setting.platform_settings')" name="plate"></el-tab-pane>
      <el-tab-pane :label="$t('setting.merchant_settings')" name="shop"></el-tab-pane>
      <el-tab-pane :label="$t('setting.member_settings')" name="user"></el-tab-pane>
    </el-tabs>
    <!--form表单-->
    <el-form size="small" ref="form" :model="form" label-width="150px">
      <!--平台设置-->
      <Plate v-show="activeName == 'plate'" :allType="allType"></Plate>
      <!--商户设置-->
      <Shop v-show="activeName == 'shop'"></Shop>
      <!--会员设置-->
      <User v-show="activeName == 'user'"></User>
      <!--提交-->
      <div class="common-button-wrapper">
        <el-button type="primary" @click="onSubmit" :loading="loading"
          >{{$t('setting.submit_button')}}</el-button
        >
      </div>
    </el-form>
  </div>
</template>

<script>
import SettingApi from "@/api/setting.js";
import Upload from "@/components/file/Upload.vue";
import Plate from "./part/Plate.vue";
import User from "./part/User.vue";
import Shop from "./part/Shop.vue";
import { formatModel } from "@/utils/base.js";
import { useUserStore } from "@/store";
const {
  changStore,
  userInfo
} = useUserStore();
export default {
  components: {
    Upload,
    Plate,
    User,
    Shop
  },
  data() {
    return {
      activeName: "plate",
      /*是否正在加载*/
      loading: false,
      /*form表单数据*/
      form: {
        name: "",
        kuaiDi100: {
          customer: "",
          key: "",
          secret: ""
        },
        supplierCash: "",
        operateType: "",
        commissionRate: "",
        supplierImage: "",
        smsOpen: "",
        supplierLogo: "",
        deliveryType: [],
        editAudit: 1,
        addAudit: 1,
        isGetLog: 0,
        storeOpen: "",
        isSendWx: 0,
        logoUrl: "",
        smsOpen: "",
        wxOpen: "",
        wxPhone: "",
        mpOpen: "",
        avatarUrl: "",
        txKey: "",
        userName: "",
        loginLogo: "",
        loginDesc: "",
        loginDescHk:"",
        loginDescEn:"",
        mpState: "",
        mpOauthUrl: "",
        enableMpOauth: "",
        h5SmsOpen: "",
        mpBinding: ""
      },
      allType: []
    };
  },
  provide: function () {
    return {
      form: this.form
    };
  },
  created() {
    this.getParams();
  },
  methods: {
    /*获取配置数据*/
    getParams() {
      let self = this;
      SettingApi.storeDetail({}, true).then(res => {
        let vars = res.data;
        self.form = formatModel(self.form, vars);

        // 转成整数，兼容组件
        for (let i = 0; i < self.form.deliveryType.length; i++) {
          self.form.deliveryType[i] = parseInt(self.form.deliveryType[i]);
        }
        self.form.kuaiDi100.customer = vars.kuaiDi100.customer;
        self.form.kuaiDi100.secret = vars.kuaiDi100.secret;
        self.form.kuaiDi100.key = vars.kuaiDi100.key;
        self.form.smsOpen = vars.smsOpen ? 1 : 0;
        self.form.mpState = vars.mpState;
        self.form.mpOauthUrl = vars.mpOauthUrl;
        self.form.enableMpOauth = vars.enableMpOauth;
        self.allType = res.data.allType;
        self.loading = false;
      }).catch(error => {
        console.log(error);
      });
    },
    /*提交*/
    onSubmit() {
      let self = this;
      let params = self.form;
      if (params.deliveryType.length < 1) {
        ElMessage({
          message: $t("setting.delivery_method_required"),
          type: "warning"
        });
        return;
      }
      self.$refs.form.validate(valid => {
        if (valid) {
          self.loading = true;
          SettingApi.editStore(params, true).then(data => {
            self.loading = false;
            ElMessage({
              message: $t("setting.mall_setting_success"),
              type: "success"
            });
            changStore(params);
            self.getParams();
          }).catch(error => {
            self.loading = false;
          });
        }
      });
    }
  }
};
</script>

<style scoped>
.tips {
  color: #ccc;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

input[type="number"] {
  -moz-appearance: textfield;
}
</style>

